<route lang="json5" type="page">
  {
    layout: 'default',
    style: {
      navigationStyle: 'custom',
    },
    anonymous: true
  }
</route>

<script lang="ts" setup>
import { useToast } from 'wot-design-uni'
import SmsCaptchaLogin from './components/SmsCaptchaLogin.vue'
import UserContract from './components/UserContract.vue'
import { useUserStore } from '@/stores'

const toast = useToast()
const loading = ref(false)
const loginMode = ref<'fast' | 'verify-code'>('fast')
const userStore = useUserStore()

// 隐私协议
const agreementChecked = ref(false)
const animation = ref('')
const showAgreeAnimation = () => {
  console.log('showAgreeAnimation')
  animation.value = 'animation-shake'
  setTimeout(() => {
    animation.value = ''
  }, 1000)
}

const onOpenPrivacyContract = () => {
  // #ifdef MP-WEIXIN
  wx.openPrivacyContract({
    success: () => {
      console.log('打开成功')
    },
    fail: () => {
      uni.showToast({
        title: '打开失败，稍后重试',
        icon: 'none',
      })
    },
  })
  // #endif
}

// 用户协议
const userContractShow = ref(false)
const onOpenUserContract = () => {
  userContractShow.value = true
}

// 快速登录
const onWxPhoneLogin = async (e) => {
  loading.value = true
  try {
    if (e.detail.code) {
      const code = e.detail.code
      await userStore.loginByWxPhone(code)
      await userStore.refreshUserInfo()
      uni.switchTab({ url: '/pages/index/index' })
    } else if (e.detail.errno === 1400001) {
      uni.showToast({
        icon: 'none',
        title: '获取手机号次数已达当前小程序上限',
      })
    } else if (e.detail.errMsg === 'getPhoneNumber:fail user deny') {
      uni.showToast({
        icon: 'none',
        title: '您已拒绝登录',
      })
    } else {
      toast.error('操作失败')
    }
  } finally {
    loading.value = false
  }
}

onLoad(() => {

})
</script>

<template>
  <image class="background" mode="widthFix" src="/static/images/login-bg.png" :draggable="false" />
  <view class="relative flex-col-start-center px-4 page pb-safe">
    <view class="mt-30% flex-col-start-center">
      <image class="mb-10rpx size-180rpx" src="/static/logo.png" />
      <text class="text-xl text-primary font-500">
        秉学教师端
      </text>
      <text class="text-primary font-400">
        仅限秉学内部员工使用
      </text>
    </view>
    <view class="mt-20% w-620rpx">
      <template v-if="loginMode === 'fast'">
        <view class="flex-row-start-center text-13px leading-20px" :class="[`agree-box ${animation}`]">
          <label>
            <radio
              style="transform:scale(0.8)" color="#33AD7C" :checked="agreementChecked"
              @click="() => agreementChecked = !agreementChecked"
            />
          </label>
          <text class="text-gray-8">
            我已阅读并同意
          </text>
          <text class="text-primary" @click="onOpenPrivacyContract">
            《隐私政策》
          </text>
          <text class="text-gray-8">
            、
          </text>
          <text class="text-primary" @click="onOpenUserContract">
            《用户协议》
          </text>
        </view>
        <button
          v-if="!agreementChecked" class="btn-main mt text-white" :loading="loading" type="primary"
          @click="showAgreeAnimation"
        >
          手机号快捷登录
        </button>
        <button
          v-else class="btn-main mt text-white" :loading="loading" type="primary"
          open-type="getPhoneNumber" @getphonenumber="onWxPhoneLogin"
        >
          手机号快捷登录
        </button>
        <view class="mt text-center">
          <text class="text-14px text-primary" @click="loginMode = 'verify-code'">
            登录遇到问题？尝试手机验证码登录 >>
          </text>
        </view>
        <!-- <button class="btn-secondary mt text-16px" plain @click="loginMode = 'verify-code'">
        手机验证码登录
        </button> -->
      </template>
      <SmsCaptchaLogin v-else @back="loginMode = 'fast'" />
    </view>
  </view>
  <wd-popup v-model="userContractShow" position="bottom" closable>
    <view class="h-600rpx bg-white">
      <scroll-view class="scroll-view-box" scroll-y="true">
        <UserContract />
      </scroll-view>
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped>
  .background {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
  }

  .btn-main {
    background: $uni-color-primary;
  }

  .btn-secondary {
    color: $uni-color-primary;
    border: 1px solid $uni-color-primary;
  }

  // 处理抽屉内容滚动
  .scroll-view-box {
    flex: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .animation-shake {
    animation: shake 0.3s !important;
  }

  @keyframes shake {
    0% {
      transform: translateX(0)
    }

    100% {
      transform: translateX(0)
    }

    10% {
      transform: translateX(-9px)
    }

    20% {
      transform: translateX(8px)
    }

    30% {
      transform: translateX(-7px)
    }

    40% {
      transform: translateX(6px)
    }

    50% {
      transform: translateX(-5px)
    }

    60% {
      transform: translateX(4px)
    }

    70% {
      transform: translateX(-3px)
    }

    80% {
      transform: translateX(2px)
    }

    90% {
      transform: translateX(-1px)
    }
  }
</style>
